<template>
	<view class="goshop-msg-page">
		<view class="goshop-msg-container">
			<!-- 空白页 -->
			<u-empty v-if="isEmpty === true && newsDataList.length === 0" :text="emptyText" mode="list"></u-empty>
			<view class="goshop-msg-wrap" v-for="(item,index) in newsDataList" :key="index">
				<view class="goshop-msg-left">
					<image class="goshop-img-radius-62" :src="memberInfo.avatar?memberInfo.avatar:defAvatar"></image>
				</view>
				<view class="goshop-msg-right">
					<view class="goshop-msg-title">
						{{item.title}}
					</view>
					<view class="goshop-msg-content">
						<view class="u-m-t-10">{{interactText}}</view>
						<view class="u-m-t-10">{{item.content}}</view>
					</view>
					<view class="goshop-msg-time">
						{{item.createTime}}
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapActions, mapGetters } from 'vuex';
	import {newsPage} from '@/common/http.api.js'
	import config from '@/common/config.js'
	export default {
		data() {
			return {
				//加载更多标志
				loadMoreFlag:false,
				isEmpty:false,
				newsDataList: [],
				emptyText:'',
				loadStatus: 'loadmore',
				loadingText: '',
				loadmoreText: '',
				nomoreText: '',
				interactText:'',
				defAvatar: '',
				params: {
					pageNo: 1,
					typeId: 1, 
					pageSize: 10,
				},
			};
		},
		computed: {
			...mapGetters(['memberInfo'])
		},
		onReachBottom() {
			if(this.loadMoreFlag){
			  this.getNewsPage()
			}
		},
		onPullDownRefresh() {
			this.params.pageNo = 1
			this.newsDataList = []
			this.getNewsPage()
		},
		async onLoad(){
			this.getNewsPage()
			await this.$onLaunched;
			this.initData();
		},
		onShow(){
		  this.refresh();	
		},
		methods:{
			...mapActions(['getMemberInfo']),
			refresh(){
				this.emptyText = this.$t('common.empty.text');
				this.loadingText = this.$t('common.loading.text');
				this.loadmoreText = this.$t('common.loadmore.text');
				this.nomoreText = this.$t('common.nomore.text');
				
				this.interactText = this.$t('interact.msg.text');
			},
			initData(){
				this.defAvatar = this.$store.state.$appInfo.defaultAvatar;
			},
			getNewsPage(){
				this.loadStatus = 'loading';
				newsPage(this.params).then((res)=>{
					uni.stopPullDownRefresh()
					if(res.code === 0){
					  if(res.data.list.length === 0){
						this.isEmpty = true;
						this.loadStatus = 'nomore'
						this.loadMoreFlag = false;
					  }else if (res.data.list.length < 10) {
						this.loadStatus = 'nomore'
						this.loadMoreFlag = false;
					  } else {
						this.params.pageNo++;
						this.loadStatus = 'loading'
						this.loadMoreFlag = true;
					  }
					  if (this.params.pageNo > 1) {
						this.newsDataList = this.newsDataList.concat(res.data.list);
					  } else {
						this.newsDataList = res.data.list;
					  }
					}
				  }).catch(error=>{
					console.error(error)
				  })
			},
		}
	}
</script>

<style lang="scss">
.goshop-msg-container{
	padding: 20rpx;
	.goshop-msg-wrap{
		border-radius: 20rpx;
		background-color: $goshop-color-auxiliary-one;
		padding: 20rpx;
		display: flex;
		justify-content: flex-start;
		margin-bottom: 20rpx;
		.goshop-msg-left{
			
		}
		.goshop-msg-right{
			flex: 3;
			.goshop-msg-title{
				font-size: $goshop-font-size-lg;
				font-weight: bold;
			}
			.goshop-msg-content{
				font-size: $goshop-font-size-base;
			}
			.goshop-msg-time{
				margin-top: 20rpx;
				color: $goshop-text-color-four;
			}
		}

	}
}
</style>